<template>
  <!-- 总工资计算 -->
	<div id="my-app">
		<span>基本工资</span>
		<input type="text" placeholder="基本工资" v-model.number="a">
		<br>
		<span>奖金</span>
		<input type="text" placeholder="奖金" v-model.number="b">
		<br>
		<span>绩效</span>
		<input type="text" placeholder="绩效" v-model.number="c">
		<br>
		<p>总工资：{{total()}}</p>
		<br>
		<label>养老保险</label>
		<input type="text" v-model.number="d">
		<label>%</label>
		<label>￥{{yanglao()}}</label>
		<br>
		<label>医疗保险</label>
		<input type="text" v-model.number="e">
		<label>%</label>
		<label>￥{{yiliao()}}</label>
		<br>
		<label>工伤保险</label>
		<input type="text" v-model.number="f">
		<label>%</label>
		<label>￥{{gongshang()}}</label>
		<br>
		<label>失业保险</label>
		<input type="text" v-model.number="g">
		<label>%</label>
		<label>￥{{shiye()}}</label>
		<br>
		<label>生育保险</label>
		<input type="text" v-model.number='h'>
		<label>%</label>
		<label>￥{{shengyu()}}</label>
		<br>
		<label>公积金</label>
		<input type="text" v-model.number="i">
		<label>%</label>
		<label>￥{{gongjijin()}}</label>
		<br>
		<label >税前工资：￥{{shuiqian()}}</label>
		<br >
		<label>个税：￥{{geshui()}}</label>
		<br>
		<label>税后工资：￥{{shuihou()}}</label>
	</div>
</template>
<script src="/vue.js"></script>
<script>
export default {
			el:"#my-app",
			data:{
				a:0,
				b:0,
				c:0,
				d:8,
				e:2,
				f:0,
				g:0.5,
				h:0,
				i:8
				
			},
			methods:{
				total:function(){
					return this.a + this.b + this.c
				},
				yanglao:function(){
					return this.total()*this.d*0.01
				},
				yiliao:function(){
					return this.total()*this.e*0.01
				},
				gongshang:function(){
					return this.total()*this.f*0.01
				},
				shiye:function(){
					return this.total()*this.g*0.01
				},
				shengyu:function(){
					return this.total()*this.h*0.01
				},
				gongjijin:function(){
					return this.total()*this.i*0.01
				},
				shuiqian:function(){
					if (this.total()>=5000){
						return this.total()-this.yanglao()-this.yiliao()-this.gongshang()-this.shiye()-this.shengyu()-this.gongjijin()
					}else{
						return 0
					}
					
				},
				nashuisuode:function(){
					
					return this.total()-5000
					
					
				},
				geshui:function(){
					
					
					if(this.nashuisuode()<0){
						return this.nashuisuode() *0
					}else if(this.nashuisuode()<=3000){
						return this.nashuisuode()* 0.03
					}else if(this.nashuisuode()<=12000){
						return this.nashuisuode() * 0.1
					}else if(this.nashuisuode()<=25000){
						return this.nashuisuode() * 0.2
					}else if(this.nashuisuode()<=35000){
						return this.nashuisuode() * 0.25
					}else if(this.nashuisuode()<=55000){
						return this.nashuisuode() * 0.3
					}else if(this.nashuisuode()<=80000){
						return this.nashuisuode() * 0.35
					}else{
						return this.nashuisuode() * 0.45
					}
				},
				shuihou:function(){
					return this.shuiqian()-this.geshui()
				}

			}
}
</script>